<template>
  <div v-for="(img_url, index) in img_src" :key="index" v-show="index === mark">
    <img style="width: 100%;height: 300px;" @mouseenter="stop" @mouseleave="start" :src="img_url.url" alt="这是轮播图" />

    <el-button class="left" @click="go_back(index)" href="#">
      <i class="el-icon-arrow-left"></i>
    </el-button>

    <el-button @click="go(index)" href="#">
      <i class="el-icon-arrow-right"></i>
    </el-button>
  </div>
  <div class="bottom">
    <span v-for="(img_url, index) in img_src" :key="index" :class="{ active: index === mark }">
    </span>
  </div>

</template>
  <script>
export default {
  data() {
    return {
      img_src: [
        { url: require("../assets/1000.png") },
        { url: require("../assets/2000.png") },
        { url: require("../assets/3000.png") },
      ],
      mark: 0,//现在是第几张
      timer:''//
      }
  },
  methods: {
    recycle() {
      if (this.mark === this.img_src.length - 1) {
        this.mark = 0;
      } else {
        this.mark++;
      }
    },
    stop() {
      clearInterval(this.timer);
    },
    start() {
      this.recycle();//先调用一次
      this.timer = setInterval(() => { this.recycle(), console.log('开始计时'); }
        , 2000);
    },
    go(index) {
      if (index < this.img_src.length - 1) {
        this.mark = index + 1;
      }
    },
    go_back(index) {
      if (index > 0) {
        this.mark = index - 1;
      }
    }

  },

};
</script>

  <style lang="less" scoped>
  .banner {
    .cycle {
      width: 100%;
      height: 320px;
      position: relative;
    }
  
    .cycle img {
      width: 100%;
      height: 100%;
      border-radius: 20px;
      position: absolute;
      background-color: gainsboro;
      display: block;
    }
  
    .cycle button {
      width: 20px;
      height: 55px;
      position: absolute;
      top: 43%;
      right: 0px;
      opacity: 0.5;
      text-align: center;
    }
  
    .cycle .left {
      left: 0px;
    }
  
    .cycle .left i {
      margin-left: -10px;
    }
  
    .bottom {
      position: absolute;
      bottom: 1px;
      left: calc(50% - 27px);
    }
  
    .cycle .bottom span {
      width: 14px;
      height: 14px;
      border-radius: 7px;
      background-color: rgba(110, 102, 102, 0.849);
      opacity: 0.4;
      margin: 10px;
      display: inline-block;
      /* span是行内元素 */
    }
  
    /* 圆圈圈激活后*/
    .cycle .active {
      /*数值分别是：水平偏移，上下偏移，模糊，大小，颜色 */
      box-shadow: 0px 0px 2px 2px #53a8ff;
      background-color: #a0cfff !important;
      opacity: 0.6;
    }
  }
  
  </style>
